// 组件通信 父传子
// 1.父组件传递数据  在子组件标签上绑定属性
// 2.子组件接收数据  props参数
import { useState } from "react";

function Son(props) {
  // props: 对象里面包含了父组件传递过来的全部数据
  console.log(props);
  return (
    <>
      <div>this is son</div>
      {/* 使用父组件传递的数据 */}
      <div>
        {props.name} {props.child}
      </div>
      <button onClick={() => props.fn("王二狗")}>修改父组件的name</button>
    </>
  );
}

function App() {
  const [name, setName] = useState("张三");
  const updateName = (val) => {
    setName(val);
  };
  return (
    <>
      <Son
        name={name}
        age={18}
        isTrue={false}
        list={[1, 2, 3]}
        obj={{
          name: "张三",
          age: 18,
        }}
        fn={updateName}
        child={<span>我是jsx</span>}
      />
    </>
  );
}

export default App;
